<template>
	<view class="content">
		<view class="box">
			<view class="nav">
				<view class="orderPathAttraction" v-if="orderPathAttractionList">
					<text v-for="(item,index) in orderPathAttractionList" :key="index">
						{{orderPathAttractionList.length == index+1 ? item.attractionName: item.attractionName + '-' }}
					</text>
				</view>
				<view class="orderPathAttraction" v-if="pathAttractionList">
					<text v-for="(item,index) in pathAttractionList" :key="index">
						{{pathAttractionList.length == index+1 ? item.attractionName: item.attractionName + '-' }}
					</text>
				</view>
				<view v-if="list.needCameraman == 0">
					{{list.cameramanSex =='male_photography' ? '男' : '女' }}{{list.cameramanType =="senior_photographer" ? '高级' :'普通' }}摄影师{{list.shootingMethod == "truing" ? '精修' :'简修' }}
				</view>
				<view class="synopsis">

					<view v-if="list.needCameraman == 1">
						不包含摄影师
					</view>
					<view v-if="list.carType == 'five_seats'">
						五座车
					</view>
					<view v-else-if="list.carType== 'seven_seats'">
						七座车
					</view>
					<view v-else="list.carType== 'no_package_car'">
						不包车
					</view>
					<view>
						{{list.containTickets==0 ?'包含门票':'不包含门票'}}
					</view>
					<view>
						{{list.containStay==0 ?'包含住宿':'不包含住宿'}}
					</view>

				</view>
				<view>
					{{list.peopleNumber ? list.peopleNumber : 1 }}人套餐
				</view>
				<!-- <view class="startDate">
					{{list.startDate}}--{{list.endDate}}
				</view> -->
			</view>
			<view class="back">
				<view>
					<text>订单状态：</text>
					<text v-if="list.orderStatus == '0'">待支付</text>
					<text v-if="list.orderStatus == '1'">未开始</text>
					<text v-if="list.orderStatus == '2'">进行中</text>
					<text v-if="list.orderStatus == '3'">已完成</text>
					<text v-if="list.orderStatus == '4'">已取消</text>
				</view>
				<view>
					<text>订单编号：</text>
					<text>{{list.orderNumber}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{list.createTime}}</text>
				</view>
				<view>
					<text>订单金额：</text>
					<text>{{list.amount}}元</text>
				</view>
				<view>
					<text>订单金额详情：</text>
					<text>摄影师{{list.cameramanAmount ? list.cameramanAmount :'0' }}+司机{{list.carAmount ? list.carAmount :'0'}}+门票{{list.ticketsAmount? list.ticketsAmount :'0'}}+导游{{list.guideAmount? list.guideAmount :'0'}}+住宿{{list.stayAmount? list.stayAmount :'0'}}+照片{{list.photoAmount? list.photoAmount :'0'}}
						={{list.amount}}</text>
				</view>
				<view class="button">
					<button @click="getRules">查看交易规则</button>
				</view>
			</view>

			<view class="pace">
				<button @click="getorderCancel(list)">取消订单</button>
				<button @click="goNextStep()">支付{{list.amount}}元</button>
			</view>
		</view>


	</view>
</template>

<script>
	import DateTimePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			return {
				from: {},
				list: {},
				startDate: '',
				endDate: '',
				show: false,
				orderPathAttractionList: [],
				pathAttractionList: [],
				extra_truing_number: 0,
				extra_simple_modify_number: 0
			};
		},
		methods: {
			// 返回上一步
			async getorderCancel(item) {
				// 实现取消订单逻辑
				console.log('取消订单', item);
				let that = this
				uni.showModal({
					title: '确认取消订单？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getorderCancel({
								id: item.id
							})
							if (res1.code == 200) {
								that.$u.toast('取消订单成功')
								uni.reLaunch({
									url: '/packagesMe/me/myOrder'
								})
							}
						} else if (res.cancel) {
							that.$u.toast('取消订单失败')
						}
					}
				})
			},
			// 选择日期
			confirm() {
				this.show = false
			},
			// 支付
			async goNextStep() {
				let that = this
				let res = await that.$u.api.getwxpay({
					orderNumber: that.list.orderNumber
				})
				if (res.code == 200) {
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res1) {
							that.$u.toast('支付成功')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						},
						fail(res1) {
							that.$u.toast('支付失败')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						}
					})
				}
			},
			// 获取订单
			async getuserPlan() {
				let res = await this.$u.api.getUserPlan(this.from)
				if (res.code == 200) {
					this.list = res.data
					this.orderPathAttractionList = res.data.orderPathAttractionList.sort((a, b) =>
						a.sort - b.sort);
					console.log(this.orderPathAttractionList);
				}
			},
			// 查看交易规则
			getRules() {
				uni.navigateTo({
					url: '/packagesIndex/pages/costCalculation/costCalculation'
				})
			},
			// 创建订单
			async getcreateOrder(id) {
				let orderExtraImage = {
					simpleModify: this.extra_simple_modify_number,
					truingNumber: this.extra_truing_number,
				}
				let res = await this.$u.api.getcreateOrder({
					packageId: id,
					startDate: this.startDate,
					endDate: this.endDate,
					orderExtraImage: orderExtraImage
				})
				if (res.code == 200) {
					this.list = res.data
					this.pathAttractionList = res.data.workPackage.workPath.pathAttractionList
				}

			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			// console.log('options.from', options.from);
			if (options.from) {
				this.from = JSON.parse(decodeURIComponent(options.from))
				this.getuserPlan() // 计划
			}
			if (options.id) {
				this.startDate = options.startDate
				this.endDate = options.endDate
				this.extra_simple_modify_number = options.extra_simple_modify_number ? options.extra_simple_modify_number :
					0
				this.extra_truing_number = options.extra_truing_number ? options.extra_truing_number :
					0
				this.getcreateOrder(options.id) // 创建订单
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		components: {
			DateTimePicker
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		height: 100vh;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 0 8rpx 20rpx;

		.box {
			background-color: #efefef;
			border-radius: 10rpx;
			padding: 20rpx;

			.nav {
				background: white;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				padding: 0 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 10rpx;

				.name {
					font-weight: 600;
				}

				.synopsis {
					display: flex;
					align-items: center;
					gap: 40rpx;

					view {
						padding: 10rpx 10rpx 10rpx 0;
						box-sizing: border-box;
					}
				}

				.startDate {
					padding-left: 30rpx;
					box-sizing: border-box;
				}

				.orderPathAttraction {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 30rpx 10rpx;
					box-sizing: border-box;
					margin-bottom:20rpx;

					text {
						display: inline-block;
						font-weight: 700;
						font-size: 30rpx;
					}
				}
			}

			.back {
				background: white;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding-bottom: 50rpx;

				view {
					display: flex;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					justify-content: space-between;
					font-size: 28rpx;
					color: #000000;

					text {
						&:nth-child(2) {
							text-align: right;
							width: 65%;
							display: block;
						}
					}
				}

				.default {
					font-size: 20rpx;
					color: #FB3D3B;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.button {
					display: flex;
					justify-content: flex-end;

					button {
						border-radius: 10rpx;
						border: 2rpx solid #272727;
						padding: 15rpx 50rpx;
						background: white;
					}
				}
			}
		}

		.pace {
			width: calc(100% - 60rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 50rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: calc(10rpx + env(safe-area-inset-bottom));

			button {
				flex: 1;
				width: 300rpx;
				height: 90rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&:nth-child(1) {
					color: $overall-color;
					border: 2rpx solid $overall-color;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: $overall-color;
				}
			}
		}
	}
</style>